<template>
  <van-sticky>
    <van-nav-bar
      title="前处理"
      left-text="返回"
      left-arrow
      @click-left="$router.replace('/home')"
    />
    <van-tabs v-model:active="active" animated @change="onChange">
      <van-tab title="待前处理"></van-tab>
      <van-tab title="全部"></van-tab>
    </van-tabs>
  </van-sticky>
  <div style="height: 0.1rem"></div>
  <div v-for="item in page.list" :key="item.group_id" class="dye-card">
    <div class="dye-card-header">
      <span>{{ item.group_id }}</span>
      <span
        style="font-weight: bold"
        :style="{ color: item.pd_id == 1020 ? 'red' : 'green' }"
        >{{ store.text("groupStatus", item.pd_id) }}</span
      >
    </div>
    <div class="dye-card-body">
      <div
        class="dye-card-body-item"
        style="font-size: 0.24rem"
        :style="{ color: item.pd_id == 1020 ? 'red' : 'green' }"
      >
        {{ item.group_num }}米
      </div>
      <div class="dye-card-body-item">
        <label>客户：</label>
        <span>{{ item.cus_name }}</span>
      </div>
      <div class="dye-card-body-item">
        <label>规格：</label>
        <span>{{ item.std_name }}</span>
      </div>
      <div class="dye-card-body-item">
        <label>花色：</label>
        <span>{{ item.color_name }}</span>
      </div>
    </div>

    <div v-if="item.pd_id == 1020" class="dye-card-footer">
      <van-button type="primary" style="margin-right: 0.1rem"
        >录入产量</van-button
      >
      <van-button type="danger">确认</van-button>
    </div>
  </div>
</template>


<script setup >
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { tip, get, post, del, removeLocalToken, store } from "@/common";

const active = ref(0);
const onChange = (index, title) => {
  if (index == 0) {
    //query.pd_id = 1020;
  } else {
    //query.pd_id = "";
  }
  //getPage(1);
};

const query = reactive({
  pageNum: 1,
  pageSize: 10,
  group_id: "",
  date_start: "",
  date_end: "",
  group_cus: "",
  plan_id: "",
  plan_type: "", // 产品类型
  group_std: "",
  group_color: "",
  group_num_start: 0, //计划查询范围起始数量值
  group_num_end: 0, //计划查询范围结束数量值
  per: "",
  pd_id: 1020,
});

const page = ref({ total: 0 });

const getPage = (pageNo) => {
  query.pageNum = pageNo || 1;

  get(`/process/pretreat`, query).then((result) => {
    page.value = result.data;
    query.pageNum = page.value.current;
    query.pageSize = page.value.pageSize;
  });
};

getPage(1);
</script>

<style scoped >
.dye-card {
  border-bottom: 0.01rem solid #eeeeee;
  /* box-shadow: 0px 0.01rem 0.01rem 0px #F5F5F5; */
}

.dye-card > .dye-card-header {
  padding: 0.08rem 0.15rem 0.06rem;
  font-size: 0.16rem;
  color: #666666;
  box-shadow: 0rem 0.01rem 0.03rem 0rem #f5f5f5;

  display: flex;
  justify-content: space-between;
}
.dye-card > .dye-card-body {
  padding: 0.1rem 0.2rem;
}
.dye-card > .dye-card-body > .dye-card-body-item {
  padding: 0.03rem 0rem;
  font-size: 0.14rem;
  display: flex;
  justify-content: space-between;
}
.dye-card > .dye-card-footer {
  padding: 0.1rem 0.15rem;
  display: flex;
  justify-content: flex-end;
}
</style>